@charset "utf-8";
$font-size:12px;/**********变量元素*********/
@function bgg($px){/************函数样式************/
    @return $px/640px*100%;
}
//html{/**************html根字体大小**************/
//  font-size: $font-size*1px;
//}

/***********这里是页面*********/
.web{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    @media screen and (min-width: 320px) and (max-height: 568px){
        .one{
            width: 100%;
            height: 100%;
        }
    }
    @media screen and (min-width: 375px) and (max-height: 667px){
        .one{
            width: 100%;
            height: 100%;
        }
    }
    @media screen and (min-width: 414px) and (max-height: 736px){
        .one{
            width: 100%;
            height: 100%;
        }
    }
    .Fromright{
        position: absolute;
//      top: 100px;
//      animation-duration: 2s;
//      animation-fill-mode: both;
//      animation-timing-function:ease-out;
//      animation-delay:2s;
//      animation-iteration-count:infinite;
//      animation-direction:alternate;
//      animation-play-state:running;
        animation: tran 30s linear infinite;
//      animation-play-state: paused;
//      animation-play-state: forwards;
//      animation-direction: normal;
    }
    @keyframes tran{
        from{
            right: 100%;
        }
        50%{
            right: 0;
        }
        to{
            right: 100%;
        }
    }
    .Fromright_1{
        position: absolute;
        animation: tran_1 30s linear infinite;
    }
    @keyframes tran_1{
        from{
            right: 100%;
        }
        10%{
//              right: 30%;
        }
        50%{
            right: 50%;
        }
        80%{
            right: 80%;
        }
        to{
            right: 100%;
        }
    }
    .Fromleft{
        position: absolute;
        animation: tran_2 40s linear infinite;
    }
    @keyframes tran_2{
        from{
            left: 100%;
        }
        50%{
            left: 0;
        }
        to{
            left: 100%;
        }
    }
    .Fromleft_1{
        position: absolute;
        animation: tran_3 30s linear infinite;
//      animation-delay: 2s;
    }
    @keyframes tran_3{
        from{
            left: 100%;
        }
        50%{
            left: 0;
        }
        80%{
            left: 80%;
        }
        to{
            left: 100%;
        }
    }
    .Fromleft_2{
        position: absolute;
        animation: tran_4 40s linear infinite;
//      animation-delay: 2s;
    }
    @keyframes tran_4{
        from{
            left: 100%;
        }
        50%{
            left: 50%;
        }
        80%{
            left: 80%;
        }
        to{
            left: 100%;
        }
    }
    .one{/***********这是第一屏************/
        background-size: 100%;
        position: relative;
        
        .kugou{
            width: bgg(103px);
            height: bgg(38px);
            margin-top: bgg(45px);
            margin-left: bgg(45px);
        }
        .ceshi{
            width: bgg(381px);
            height: bgg(71px);
            margin-top: bgg(79px);
            margin-left: bgg(126px);
        }
        .houdezhu{
            width: bgg(576px);
            height: bgg(157px);
            margin-left: bgg(22px);
            margin-top: bgg(-17px);
        }
        .yule{
            width: bgg(352px);
            height: bgg(62px);
            margin-left: bgg(148px);
            margin-top: bgg(-10px);
        }
        .yun{
            width: bgg(77px);
            height: bgg(56px);
            margin-left: bgg(40px);
            margin-top: bgg(-25px);
        }
        .bb{
            width: bgg(341px);
            height: bgg(29px);
            margin-left: bgg(155px);
            margin-top: bgg(-10px);
        }
        .yun_1{
            width: bgg(58px);
            height: bgg(43px);
            opacity: 0.5;
            margin-left: bgg(26px);
            margin-top: bgg(-5px);
            
        }
        .wuge{
            width: 100%;
            position: absolute;
            top: 45.875%;
            right: 0;
            .yun_2{
                width: bgg(43px);
//              height: bgg(32);
                position: absolute;
//              top: bgg(10);
                right: bgg(135px);
                margin-top: bgg(15px);
                z-index: 1;
            }
            .faguang{
                width: bgg(204px);
//              height: bgg(222);
                position: absolute;
                right: bgg(47px);
//              top: bgg(-50);
                
                margin-top: bgg(-50px);
            }
            .taiyangk{
                width: bgg(65px);
//              height: bgg(65);
                position:absolute;
                right: bgg(110px);
//              top: bgg(100);
                z-index: 3;
                content: "";
                margin-top: bgg(30px);
            }
            .yun_3{
                width: bgg(34px);
//              height: bgg(25);
                position: absolute;
//              top: bgg(50);
                right: bgg(130px);
                margin-top: bgg(105px);
                z-index: 2;
            }
            .yun_4{
                width: bgg(59px);
//              height: bgg(44);
                position: absolute;
//              top: bgg(100);
                right: bgg(40px);
                margin-top: bgg(80px);
                z-index: 1;
            }
        }
        .caigeming{
            .qianyuezhuan{
                width: bgg(94px);
                height: bgg(69px);
                float: left;
                margin-top: bgg(180px);
                margin-left: bgg(49px);
            } .qizi{
                width: bgg(128px);
                height: bgg(78px);
                margin-left: bgg(-90px);
            }
            .nvwang{
                width: bgg(339px);
                height: bgg(421px);
                margin-top: 10.625%;
                margin-left: bgg(-35px);
            }
            .shenmegui{
                width: bgg(148px);
                height: bgg(82px);
                float: right;
                margin-top: -53.40625%;
                position: relative;
                z-index: 1;
                content: "";
                left: bgg(-40px);
            }
//          .yun_2{
//              width: bgg(43);
//              height: bgg(32);
//          }
//          .faguang{
//              width: bgg(204);
//              height: bgg(222);
//          }
//          .taiyangk{
//              width: bgg(65);
//              height: bgg(65);
//              
//          }
//          .yun_3{
//              width: bgg(34);
//              height: bgg(25);
//          }
//          .yun_4{
//              width: bgg(59);
//              height: bgg(44);
//          }
            .taizifei{
                width: bgg(94px);
                height: bgg(57px);
                float: right;
                margin-top: bgg(-100px);
                position: relative;
                left: bgg(-50px);
                top: bgg(-5px);
            }
        }
        .kaishi{
            text-decoration: none;
            &:active{
                opacity: 0.7;
            }
            img{
                width: bgg(171px);
//              height: bgg(70);
                margin-left: bgg(240px);
                padding-top: bgg(15px);
            }
        }
    }
    .two{/**********这是第二屏**********/
        
    }
    .three{/*************这是第三屏*************/
        .yezi{
            width: bgg(498px);
            height: bgg(96px);
            margin-top: bgg(104px);
            margin-left: bgg(44px);
        }
        .touxiang{
            .hulu{
                width: bgg(208px);
                height: bgg(233px);
                margin-top: bgg(69px);
                margin-left: bgg(215px);
                position: relative;
                z-index: +1;
            }
        }
        .fuyun{
            position: relative;
            .fuyun1{
                width: bgg(85px);
//              height: 62px;
                position: absolute;
//              top: bgg(-140px);
                left: bgg(195px);
                margin-top: bgg(-95px);
            }
            .fuyun2{
                width: bgg(63px);
                position: absolute;
//              top: bgg(-50px);
                left: bgg(400px);
                margin-top: bgg(-70px);
//              height: 46px;
            }
        }
    }
    .four{/*************这是第四屏*************/
        .touxiang{
            position: relative;
            z-index: 1;
            .tou_07{
                width: bgg(334px);
                height: bgg(256px);
                margin-left: bgg(138px);
                margin-top: bgg(62px);
            }
        }
        .anniu_1{
            .touxiang_1{
                .touxiang_2{
                    font-size: 6.6px;
                    padding: 4px 8px;
                    letter-spacing: -1px;
                }
            }
        }
    }
    .five{/*************这是第五屏*************/
        .touxiang{
            .zuichun{
                width: bgg(241px);
                height: bgg(125px);
                margin-left: bgg(210px);
                margin-top: bgg(123px);
            }
        }
    }
    .six{/*************这是第六屏*************/
        .touxiang{
            .hongxin{
                width: bgg(353px);
                height: bgg(190px);
                margin-left: bgg(143px);
                margin-top: bgg(50px);
            }
        }
        .anniu_1{
            .chuanqi{
                .chuanqi_1{
                    font-size: 6.6px;
                    padding: 4px 8px;
                }
            }
        }
    }
    .seven{/*************这是第七屏*************/
        .touxiang{
            .sitou_07{
                width: bgg(345px);
                height: bgg(193px);
                margin-left: bgg(152px);
                margin-top: bgg(35px);
            }
        }
    }
    .eight{/*************这是第八屏*************/
        .touxiang{
            .kuai_07{
                width: bgg(359px);
                height: bgg(247px);
                margin-left: bgg(158px);
                margin-top: bgg(105px);
            }
        }
    }
    .nine{/*************这是第九屏*************/
        .touxiang{
            .jie_07{
                width: bgg(250px);
                height: bgg(350px);
                margin-left: bgg(200px);
                margin-top: bgg(34px);
            }
        }
    }
    .ten{/*************这是第十屏*************/
        .touxiang{
            .meinv1_07{
                width: bgg(250px);
                height: bgg(350px);
                margin-left: bgg(200px);
                margin-top: bgg(34px);
            }
        }
        .anniu_1{
            .adele{
                margin-top: bgg(-50px);
            }
        }
    }
    .eleven{/*************这是第十一屏*************/
        .touxiang{
            .bg5_07{
                width: bgg(250px);
                height: bgg(350px);
                margin-left: bgg(200px);
                margin-top: bgg(21px);
            }
        }
        .anniu_1{
            .exo{
                margin-top: bgg(-80px);
            }
        }
    }
    .twelve{/*************这是第十二屏样式*************/
        .touxiang{
            .bg7_07{
                width: bgg(250px);
                height: bgg(350px);
                margin-left: bgg(200px);
                margin-top: bgg(34px);
            }
        }
    }
    .thirteen{/*************这是第十三屏样式*************/
        .touxiang{
            .san_07{
                width: bgg(321px);
                height: bgg(246px);
                margin-left: bgg(147px);
                margin-top: bgg(80px);
            }
        }
    }
    .fourteen{/*************这是第十四屏样式*************/
        .touxiang{
            .bg13_07{
                width: bgg(250px);
                height: bgg(350px);
                margin-left: bgg(200px);
                margin-top: bgg(25px);
            }
        }
        .xuanxiang{
            .xuanxiang_1{
                margin-top: bgg(-110px);
                
            }
        }
    }
    .fifteen{/*************这是第十五屏样式*************/
        .touxiang{
            .bg14_07{
                width: bgg(251px);
                height: bgg(352px);
                margin-left: bgg(200px);
                margin-top: bgg(25px);
            }
        }
        .anniu_1{
            
            .angelababy{
                .angelababy_1{
                    font-size: 6.6px;
                    padding: 4px 5px;
                    letter-spacing: -1px;
                }
            }
        }
        .anniu_2{
            .anniu_3{
                margin-top: bgg(-120px);
            }
        }
    }
    .sixteen{/*************这是第十六屏样式*************/
        .touxiang{
            .bg15_07{
                width: bgg(291px);
                height: bgg(291px);
                margin-left: bgg(181px);
                margin-top: bgg(46px);
            }
        }
    }
    .seventeen{/*************这是第十七屏样式*************/
        .touxiang{
            .laba{
                width: bgg(348px);
                height: bgg(326px);
                margin-left: bgg(147px);
                margin-top: bgg(60px);
            }
        }
        .anniu_2{
            .laba_1{
                margin-top: bgg(-50px);
            }
        }
    }
    .eighteen{/*************这是第十八屏样式*************/
        .touxiang{
           .mangmian{
                width: bgg(350px);
                height: bgg(250px);
                margin-left: bgg(152px);
                margin-top: bgg(33px);
           } 
        }
    }
    .nineteen{/*************这是第十九屏样式*************/
        .touxiang{
            .zhoujielun{
                width: bgg(251px);
                height: bgg(352px);
                margin-left: bgg(200px);
                margin-top: bgg(23px);
            }
        }
        .anniu_2{
            .zhuanji{
                margin-top: bgg(-100px);
            }
        }
    }
    .twenty{/*************这是第二十屏样式*************/
        .touxiang{
            .haizi{
                width: bgg(231px);
                height: bgg(278px);
                margin-left: bgg(199px);
                margin-top: bgg(83px);
            }
        }
    }
    .twenty_one{/*************这是第二十一屏样式*************/
        .touxiang{
            .amei{
                width: bgg(250px);
                height: bgg(350px);
                margin-left: bgg(202px);
                margin-top: bgg(41px);
            }
        }
        .anniu_2{
            .amei{
                margin-top: bgg(-50px);
            }
        }
    }
    .twenty_two{/*************这是第二十二屏样式*************/
        .touxiang{
            .shengnan{
                width: bgg(288px);
                height: bgg(367px);
                margin-left: bgg(175px);
                margin-top: bgg(40px);
            }
        }
    }
    .twenty_three{/*************这是第二十三屏样式*************/
        .touxiang{
            margin-left: bgg(138px);
            margin-top: bgg(35px);
            .xiaolongnv{
                width: 35.4375%;
                height: bgg(152px);
            }
            .xiaolongnv_1{
                margin-right: bgg(10px);
                margin-bottom: bgg(10px);
            }
            .xiaolongnv_2{
                margin-bottom: bgg(10px);
            }
            .xiaolongnv_3{
                margin-right: bgg(10px);
            }
        }
        .anniu_2{
            .a{
                span{
                    text-align: center;
                    width: bgg(330px);
                }
            }
            .b{
                margin-top: bgg(-80px);
            }
        }
    }
}
